<template>
  <div class="note-class-wrapper">
    <div class="note-class" :class="{ hide: state.showMenu }">
      <header>
        <div>
          <van-icon name="wap-nav" @click="() => (state.showMenu = true)" />
        </div>
        <div>
          <van-icon name="edit" @click="goPublish" />
          <van-icon name="like-o" />
          <van-icon name="search" />
        </div>
      </header>

      <section>
        <div
          class="note-item"
          v-for="(item, index) in noteClassList"
          :key="index"
          :style="`background-color:${item.bgColor}`"
          @click="goNoteList(item.title)"
        >
          <span class="title">{{ item.title }}</span>
        </div>
      </section>
    </div>
    <Menu class="menu" @hidden="hideMenu" :class="{ active: state.showMenu }" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import Menu from "../components/Menu.vue";
const router = useRouter();

const noteClassList = [
  {
    title: "美食",
    bgColor: "#ee8282",
  },
  {
    title: "旅行",
    bgColor: "#dcf189",
  },
  {
    title: "学习",
    bgColor: "#c2ebf1",
  },
  {
    title: "娱乐",
    bgColor: "#8282ee",
  },
  {
    title: "其他",
    bgColor: "#949c9d",
  },
];
const state = ref({
  showMenu: false,
});
const hideMenu = (e) => {
  state.value.showMenu = e;
};
function goNoteList(item) {
  router.push({
    path: "/noteList",
    query: {
      title: item,
    },
  });
}
const goPublish =()=>{
  router.push("/notePublish")
}
</script>

<style lang="less" scoped>
.note-class-wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .note-class {
    position: absolute;
    transform: translateX(0);
    width: 100%;
    height: 100%;
    padding: 0 0.5866rem;
    box-sizing: border-box;
    overflow-y: scroll;
    transition: transform 0.3s;
    &.hide {
      transform: translateX(100%);
    }
    header {
      display: flex;
      justify-content: space-between;
      height: 1.2rem;
      line-height: 1.2rem;
      margin: 10px 0;

      .van-icon {
        margin-left: 10px;
      }
    }
    section {
      width: 100%;
      .note-item {
        height: 3.2rem;
        border-radius: 0.3rem;
        margin-bottom: 0.64rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-shadow: 0 0 10px 2px #ccc;
        overflow: hidden;
        .title {
          color: #fff;
          font-size: 0.5333rem;
          text-align: center;
          display: block;
          margin-top: 0.5333rem;
        }
      }
    }
  }
  .menu {
    width: 100%;
    height: 100vh;
    position: absolute;
    transform: translateX(-100%);
    transition: transform 0.3s;
    &.active {
      transform: translateX(0%);
    }
  }
}
</style>
